<template>
  <div class="box">
    <Header title="能不能吃" />
    <van-tabs v-model:active="active" @click-tab="onClickTab">
      <van-tab
        v-for="item1 in title1"
        :key="item1.class_id"
        :title="item1.name"
      />
    </van-tabs>
    <router-view></router-view>
  </div>
</template>
<script setup>
import { ref, watch } from "vue";
import { useCount } from "../../store/index";
import { onBeforeRouteUpdate, useRouter } from "vue-router";
let router = useRouter();
let store = useCount();
import Header from "../../components/Nbnc/Header.vue";
store.changeParams({ Nbnc_id: 1 });
let title1 = ref([
  {
    name: "狗狗",
    class_id: 1,
    to: "/nbnc/nbncIndex/dog",
  },
  {
    name: "猫咪",
    class_id: 2,
    to: "/nbnc/nbncIndex/cat",
  },
]);

let onClickTab = ({ name }) => {
  let index = name + 1;
  store.changeParams({ Nbnc_id: index });
  let title = title1.value.filter((item) => item.class_id == index);
  router.push(title[0].to);
};
const active = ref(0);
watch(
  () => active.value,
  (newValue) => {
    if (newValue === 0) {
      router.push("/nbnc/nbncIndex/dog");
    }
  },
  { immediate: true }
);
</script>
<style scoped>
.box {
  width: 100%;
  box-sizing: border-box;
  padding: 0 20px;
}
</style>